import React, { useState } from 'react';
import { Typography } from 'antd';
import { Input, Select, AutoComplete } from 'antd';
import WEditor from '../widgets/WEditor';
import useAppContext from '../hooks/useAppContext';
import { SELECT_NODE, UNSELECT_NODE } from '../actions/DESGIN'

import PropertyEditor from '../components/PropertyEditor';
import _ from 'lodash';


const { Title, Text } = Typography;
const { Option } = Select;


const DScoreSelect = (props) => {

    const { root, parent, node, pindex, onSchemaChange } = props;
    const { rootState, dispatch } = useAppContext();
    const [mouseOver, setMouseOver] = useState(false);
    const [editProps, setEditProps] = useState(false);

    //样式
    const style = {
        //width: '100%',

        borderWidth: '1px',
        borderStyle: 'dotted',
        borderColor: (((rootState.selectedCode == node.code) || mouseOver) ? 'red' : '#1890ff'),
        // margin: '5px',
        // padding: '5px'
    };


    const { title = "", rules = {} } = node.attrs;
    const { required } = rules;
    const height = "30px";

    //console.log(required,'required');

    //console.log(style,'style');

    return <>  {editProps ? <PropertyEditor
        attrList={[{
            name: 'idx',
            path: 'idx',
            label: '序号',
            type: 'number',
            min: 1
        }, {
            name: 'title',
            path: 'title',
            label: '名称',
            type: 'string'
        },{
            name:'dataPath',
            path:'dataPath',
            label:'数据路径',
            type:'string'
        }, {
            name: 'required',
            path: 'rules.required',
            label: '必填',
            type: 'boolean'
        }, {
            name: 'weight',
            path: 'weight',
            label: '权重',
            type: 'number'
        }, {
            name: 'items',
            path: 'items',
            label: '计分项',
            type: 'score-select-items'
        }]}
        node={node}
        onChange={(newNode) => {
            //root
            onSchemaChange({ sourceType: 'row' }, _.cloneDeep(root));
        }}
        onClose={() => {
            setEditProps(false);
        }} /> : <></>}
        <WEditor code={node.code}
            onPropsEditClick={() => {
                //取消选择该节点
                dispatch({
                    type: UNSELECT_NODE
                });
                //alert('编辑按钮');
                setEditProps(true);
            }}
            onPropsDeleteClick={() => {
                //删除已选中的元素
                parent.children = parent.children.filter(m => {
                    return m.code != node.code;
                });
                onSchemaChange({ sourceType: 'root' }, _.cloneDeep(root));
            }}>
            <div style={style}
                onMouseOver={(evt) => {
                    //阻止事件继续冒泡
                    evt.stopPropagation();
                    setMouseOver(true);
                }}
                onMouseOut={(evt) => {
                    //阻止事件继续冒泡
                    evt.stopPropagation();
                    setMouseOver(false);
                }}
                onClick={() => {
                    //取消选择该节点
                    dispatch({
                        type: UNSELECT_NODE
                    });

                }}
                onDoubleClick={(evt) => {
                    //setEdit(true);
                    //alert('弹出属性框input');
                    dispatch({
                        type: SELECT_NODE,
                        code: node.code
                    });
                    //阻止事件继续冒泡
                    evt.stopPropagation();
                }}>
                <Input.Group compact style={{ display: 'flex', alignItems: 'center' }}>
                    <Text style={{ width: '47%', textAlign: 'right', paddingRight: '15px' }}>
                        {`${title}:`}
                    </Text>

                    <Select
                        showSearch
                        style={{ width: '48%' }}
                        placeholder={`请选择${title}`}
                        dropdownMatchSelectWidth={false}
                        optionFilterProp="label"
                     >

                        {
                            (_.get(node, 'attrs.items', [])).map(o => {
                                return <Option key={o.id} value={o.id} label={o.des}>
                                    <div>
                                        <span>{`${o.des}`}</span>
                                        <span>___</span>
                                        <span>{`${o.score}分`}</span>
                                    </div>
                                </Option>
                            })
                        }

                    </Select>,

                    {required ? <Text style={{ width: '5%', textAlign: 'center', color: 'red' }}>
                        *</Text> : <></>}
                </Input.Group>
            </div>
        </WEditor></>

}

export default DScoreSelect;